<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(image, index) in swiperList" :key="index">
				<image :src="image" class="swiper-item-image"></image>
			</swiper-item>
		</swiper>
		<!-- 功能按钮区域 -->
		<view class="function-buttons">
			<view class="function-button" v-for="(button, index) in functionButtons" :key="index"
				@click="button.clickHandler">
				<image :src="button.icon" class="function-button-icon"></image>
				<text class="function-button-text">{{ button.text }}</text>
			</view>
		</view>
		<!-- 推荐信息区域 -->
		<view class="recommend-info">
			<text class="recommend-title">推荐菜品</text>
			<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
				<image :src="item.image" class="recommend-item-image"></image>
				<view class="recommend-item-content">
					<text class="recommend-item-title">{{ item.title }}</text>
					<text class="recommend-item-price">{{ item.price }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperList: [
				'../../static/imgs/首页_02.jpg',
				'../../static/imgs/首页_02.jpg',
				'../../static/imgs/首页_02.jpg',
			],
			functionButtons: [
				{
					icon: '../../static/imgs/4.jpg',
					text: '热门菜品',
					clickHandler: this.handleButtonClick
				},
				{
					icon: '../../static/imgs/5.jpg',
					text: '优惠活动',
					clickHandler: this.handleButtonClick
				},
				{
					icon: '../../static/imgs/6.jpg',
					text: '新品推荐',
					clickHandler: this.handleButtonClick
				}
			],
			recommendList: [
				{
					image: '../../static/imgs/1.jpg',
					title: '宫保鸡丁',
					price: '￥28'
				},
				{
					image: '../../static/imgs/2.jpg',
					title: '鱼香肉丝',
					price: '￥25'
				},
				{
					image: '../../static/imgs/3.jpg',
					title: '糖醋排骨',
					price: '￥32'
				}
			]
		}
	},
	methods: {
		handleButtonClick() {
			console.log('点击了功能按钮')
		}
	}
}
</script>

<style scoped>
.container {
	padding: 15px;
	background-color: #f8f8f8;
}

.swiper {
	width: 100%;
	height: 200px;
}

.swiper .swiper-item-image {
	width: 100%;
	height: 100%;
}

.function-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 15px;
}

.function-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
	padding: 10px;
}

.function-button .function-button-icon {
	width: 40px;
	height: 40px;
}

.function-button .function-button-text {
	margin-top: 5px;
	font-size: 14px;
}

.recommend-info {
	margin-top: 15px;
}

.recommend-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.recommend-item {
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
}

.recommend-item-image {
	width: 80px;
	height: 80px;
	margin-right: 10px;
}

.recommend-item-content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.recommend-item-title {
	font-size: 16px;
}

.recommend-item-price {
	font-size: 14px;
	color: red;
}
</style>